<template>
  <div class="home">
    <header>
    	<h2>猫眼电影</h2>
    </header><!--head制作-->
		<nav>
			<div class="region">广州<div class="triangle"></div></div>
			<div class="well-received tab"  :class="{'active': currentTab==='Beingontheheat'}" @click="toggleTab('Beingontheheat')">正在热映</div>
			<div class="Show tab" :class="{'active': currentTab==='Soontobeshown'}"  @click="toggleTab('Soontobeshown')">即将上映</div>
			<div class="search"></div>
		</nav><!--nav制作-->
		<article class="">
			<Beingontheheat :lists="list" :is="currentTab" :Soon_list="Soon_list">
				
			</Beingontheheat>
			<!--<soontobeshown :Soon_list="Soon_list">
				
			</soontobeshown>-->
		</article><!--主体内容制作-->
		<footer>
			<div><svgmovie/><p>电影</p></div>
			<div><svgcinema/><p>影院</p></div>
			<div><svgmy/><p>我的</p></div>
		</footer><!--foot制作-->
	</div>
</template>

<script>
// @ is an alias to /src
//import HelloWorld from '@/components/HelloWorld.vue'
import Beingontheheat from '@/components/Beingontheheat'
import Soontobeshown from '@/components/Soontobeshown'
import svgmovie from '@/svg/movie.svg'
import svgcinema from '@/svg/cinema.svg'
import svgmy from '@/svg/my.svg'
export default{
	mounted(){
		this._initData();
		this._IinitData();
		console.log("mounted")
				},
  name: 'home',
  components: {
        Beingontheheat,
        Soontobeshown,
        svgmovie,
        svgcinema,
        svgmy,
  },
  data(){
  	return{
			list:[],
			Soon_list:[],
			currentTab: 'Beingontheheat' // currentTab 用于标识当前触发的子组件
  	}
  },
	methods:{
				toggleTab: function(tab) {
					   this.currentTab = tab; // tab 为当前触发标签页的组件名
					 },
				_initData(){
					return new Promise((resolve,reject)=>{
						var xhr=new XMLHttpRequest();
						xhr.open("GET","https://www.easy-mock.com/mock/5bd2c2d372587d2d96a83671/maoyan/maoyan");
						xhr.send();
						xhr.addEventListener("readystatechange",function(){
							if(xhr.readyState==4){
								if(xhr.status==200){
									resolve(xhr.response)
								}
							}
						})
					}).then((res)=>{
						this.list=JSON.parse(res).movieList;
						console.log(res)
						})
					},
				_IinitData(){
					return new Promise((resolve,reject)=>{
						var xhr=new XMLHttpRequest();
						xhr.open("GET","https://www.easy-mock.com/mock/5bd4971d855f834671b40981/maoyan_copy/maoyan");
						xhr.send();
						xhr.addEventListener("readystatechange",function(){
							if(xhr.readyState==4){
								if(xhr.status==200){
									resolve(xhr.response)
								}
							}
						})
					}).then((resS)=>{
						this.Soon_list=JSON.parse(resS).coming;
						console.log(resS)
						})
					}
			}
}
</script>

<style lang="scss">
@charset "utf-8";
@import "../../public/scss/reset"; 
$fs:64px;
html{
    font-size: $fs;
}
@function r($px){
    @return $px/$fs*1rem;   
	
}

header{
	width: 100%;
	height: r(100px);
	background: #e54847;
	h2{
	font-size: r(36px);
	font-weight: 400;
	color: #fff;
	text-align: center;
	line-height: r(100px);/*标题制作*/
	}
}/*head制作*/

nav{
	height: r(88px);
	display: flex;
	border-bottom: r(2px) solid #d8d8d8;
	align-items: center;
	justify-content: space-around;
	.region{
		font-size: r(30px);
		color: #666;
		.triangle{
			width:0;
	    height:0;
	    margin-left: r(4px);
	    display: inline-block;
	    vertical-align: middle;
	    border-width:r(10px) r(7px) 0;
	    border-style:solid;
	    border-color:#666 transparent transparent;/*灰 透明 透明 */
	  }/*三角形制作*/
	}/*地区选择*/
	.well-received{
		font-size: r(30px);
		font-weight: 700;
		color: #666;
		height: r(88px);
		line-height: r(88px);
	}/*正在热映*/
	.Show{
		font-size: r(30px);
		font-weight: 700;
		color: #666;
		height: r(88px);
		line-height: r(88px);
	}/*即将上映*/
	.active{
  color:red;
  border-bottom: r(4px) solid #ff4611;
		}
	
	.search{
		width: r(40px);
		height: r(40px);
		background: url() no-repeat;
		background-size: contain;
		}/*搜索按钮制作*/
}

footer{
	width: 100%;
	height: r(96px);
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	border-top: r(2px) solid #d8d8d8;
	justify-content: space-around;
	div{
		margin-top:r(-10px);
		p{
			font-size: r(20px);
			color: #696969;
			margin-top: r(-12px);
		}
	}
}
</style>
